﻿@page "/chart/export"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the export of the chart, allowing you to export it to PDF and image formats such as JPEG, PNG and SVG.</p>
</SampleDescription>
<ActionDescription>
    <p>By clicking on <code>Export</code>, you can export the chart by calling its public method <code>Export()</code>. To be more precise, define parameters such as the export type and the file name while exporting.</p>
    <p>More information about the export can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-print/#export'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-lg-9 sb-property-border" align="center">
    <SfChart @ref="@chartInstance" Title="Top 10 Countries Using Solar Power" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="40" Interval="10" Title="Measurements (in Gigawatt)" LabelFormat="{value}GW">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Country" YName="GigaWatts" Type="ChartSeriesType.Column">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tbody>
                    <tr id="button-control" style="height: 50px" align="center">
                        <td>
                            <SfButton @onclick="ExportChart" Content="Export" CssClass="e-flat" IsPrimary="true"></SfButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{

    private SfChart chartInstance;
    private Theme Theme { get; set; }
    public List<ExportData> ChartPoints { get; set; } = new List<ExportData>
    {
        new ExportData {Country="DEZ", GigaWatts = 35.5},
        new ExportData {Country="CHN", GigaWatts = 18.3},
        new ExportData {Country="ITA", GigaWatts = 17.6},
        new ExportData {Country="JPN", GigaWatts = 13.6},
        new ExportData {Country="US", GigaWatts = 12},
        new ExportData {Country="ESP", GigaWatts = 5.6},
        new ExportData {Country="FRA", GigaWatts = 4.6},
        new ExportData {Country="AUS", GigaWatts = 3.3},
        new ExportData {Country="BEL", GigaWatts = 3},
        new ExportData {Country="UK", GigaWatts = 2.9}
    };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public async Task ExportChart(MouseEventArgs args)
    {
        await chartInstance.ExportAsync(ExportType.PNG, "Chart");
    }

    public class ExportData
    {
        public string Country { get; set; }
        public double GigaWatts { get; set; }
    }

}

